<script lang="ts" setup>
import { FormInstance } from 'element-plus'
import { ref } from 'vue'
import CustomActiveButton from '@/components/basic/ui-elements/CustomActiveButton.vue'
import CustomActiveButtonGroup from '@/components/basic/ui-elements/CustomActiveButtonGroup.vue'
interface Form extends Record<string, any> {
  bikeCode: string
  bikeStatus: string
  lockStatus: string
  onlineStatus: string
  allowChangeBattery: string
  voltage: string
  minPower: number
  maxPower: number
  feeRule: string
  type: '0'
  storeId: ''
}
const form = defineModel<Form>({ required: true })

const formRef = ref<FormInstance | null>(null)
const reset = () => {
  formRef.value?.resetFields()
}
defineExpose({ reset })
</script>

<template>
  <el-card shadow="never">
    <template #header>
      <div class="filter-timebike__title">
        <span>车辆筛选</span>
      </div>
    </template>
    <el-form :model="form" ref="formRef">
      <el-form-item prop="lockStatus" label="车锁状态">
        <custom-active-button-group v-model="form.lockStatus">
          <custom-active-button active-value="0" inactive-value="">开锁</custom-active-button>
          <custom-active-button active-value="1" inactive-value="">上锁</custom-active-button>
        </custom-active-button-group>
      </el-form-item>
      <el-form-item prop="onlineStatus" label="网络状态">
        <custom-active-button-group v-model="form.onlineStatus">
          <custom-active-button active-value="1" inactive-value="">联网</custom-active-button>
          <custom-active-button active-value="0" inactive-value="">断网</custom-active-button>
        </custom-active-button-group>
      </el-form-item>
      <el-form-item prop="voltage" label="额定电压">
        <custom-active-button-group v-model="form.voltage">
          <custom-active-button active-value="60V" inactive-value="">60V</custom-active-button>
          <custom-active-button active-value="48V" inactive-value="">48V</custom-active-button>
        </custom-active-button-group>
      </el-form-item>
      <el-form-item prop="allowChangeBattery" label="免费换电">
        <custom-active-button-group v-model="form.allowChangeBattery">
          <custom-active-button active-value="1" inactive-value="">支持</custom-active-button>
          <custom-active-button active-value="0" inactive-value="">不支持</custom-active-button>
        </custom-active-button-group>
      </el-form-item>
      <el-form-item label="车辆电量">
        <el-input v-model="form.minPower" style="width: 60px; margin-right: 10px" />
        <el-input v-model="form.maxPower" style="width: 60px" />
      </el-form-item>
      <el-form-item prop="feeRule" label="计费规则">
        <custom-active-button-group v-model="form.feeRule">
          <custom-active-button active-value="TimeBased" inactive-value=""
            >按时长</custom-active-button
          >
          <custom-active-button active-value="Tiered" inactive-value=""
            >按阶梯</custom-active-button
          >
        </custom-active-button-group>
      </el-form-item>
      <el-form-item prop="bikeStatus" label="车辆状态">
        <custom-active-button-group v-model="form.bikeStatus">
          <custom-active-button active-value="0" inactive-value="">空闲中</custom-active-button>
          <custom-active-button active-value="1" inactive-value="">使用中</custom-active-button>
          <custom-active-button active-value="2" inactive-value="">维修中</custom-active-button>
        </custom-active-button-group>
      </el-form-item>
    </el-form>
  </el-card>
</template>

<style scoped lang="scss"></style>
